@import '../../ui/base'
@import './config'

.root
  height $header-height
  transition background-color .2s
  background-color $header-backgroundColor
  @extends .h-center
  justify-content center
  position relative
  z-index 50
  .logo
    border-radius 0
    display block
    width 45px
    height 45px
    background-color #FFF

.root > div
  width 1100px
  @extends .h-center
  justify-content space-between
  > div
    @extends .h-center

.search-list
  width 100%

.list
  @extends .h-center
  justify-content space-between
  > li
    user-select none
    height 50px
    display flex 
    align-items center
    padding 0 20px
    justify-content center
    > a[data-role="link"]
      color #7f8a97
      font-size 14px
      transition color .2s
      &.active
      &:hover
        opacity 1
        color #e6e7e8

.settings
  position relative
  @extend .h-center
  > .arrow
    color #7f8a97
    font-size 12px
    margin-left 5px
  .settings-avatar
    &:hover
      opacity 1
    display block
    width 30px
    height 30px
    border-radius 50%
    box-shadow 1px 1px 2px rgba(0,0,0,0.35)
    overflow hidden
    > i
      border-radius 50%
  > ul
    background-color #303D4B
    width: 180px
    position: absolute
    z-index 10
    top: 100%
    right: -10px
    box-shadow 0px 0px 6px rgba(0, 0, 0, .2)
    border-bottom-left-radius 3px
    border-bottom-right-radius 3px
    padding 10px 0
    &:after, &:before
      bottom 100%
      right 40px
      border solid transparent
      content " "
      height 6px
      width 6px
      position absolute
      pointer-events none
    &:after
      border-color rgba(255, 255, 255, 0)
      border-bottom-color #303D4B
      border-width 5px
      margin-left -8px
    &:before
      border-color rgba(194, 225, 245, 0)
      border-width 6px
      margin-left -9px
      right 39px
    li
      margin 0
      transition background-color .2s
      &:hover
        background-color #212A34
        opacity 1
      &:first-child
        a[data-role="link"]
          border-top none
    a[data-role="link"]
      span
        display inline-block
        width 52px
        text-align left
      &:hover
        opacity 1
      color #fff
      display block
      padding 8px 0 8px 0
      font-size 13px
      text-align center
.live_notify
  position absolute
  right -26px
  top 100%
  width 420px
  background-color #fff
  z-index 99
  box-shadow 0px 0px 6px rgba(0, 0, 0, .2)
  font-size 13px
  padding 5px 0 0 0 
  border-radius 3px
  > a
    border-bottom-left-radius 3px
    border-bottom-right-radius 3px
  &:after, &:before
    bottom 100%
    right 44px
    border solid transparent
    content " "
    height 6px
    width 6px
    position absolute
    pointer-events none
  &:after
    border-color rgba(255, 255, 255, 0)
    border-bottom-color #fff
    border-width 5px
    margin-left -8px
  &:before
    right 43px
    border-color rgba(194, 225, 245, 0)
    border-bottom-color #ccc
    border-width 6px
    margin-left -9px
  &>div
    margin 0 15px
    padding 5px 15px 8px 15px
    color #777
    border-top 1px solid #eee
    &:first-child
      border-top none
    &:hover
      >a
        text-decoration underline !important



.live_more
  display block
  text-align center
  margin 0
  padding 4px 0
  background #f9f9f9

.hr
  background-color #347ACE
  font-size 14px
  width 100px
  position absolute
  height 50px
  right 0
  top 0
  text-align center
  transition background-color .2s
  line-height 50px
  user-select none
  box-shadow -4px 0 6px 1px rgba(0, 0, 0, .3)
  &[data-role="link"]
    color #EBEEF3
    &:hover
      background-color rgba(52, 122, 206, .85)
      color #fff
      opacity 1
    &:active
      background-color #2C4373
      color #fff
    &.active
      background-color #2C4373
      box-shadow initial

.hr-nav.root
  background-color #3A5898

.hr-nav
  .settings
    margin-right 20px
    height 50px
    > ul
      background-color #4A6EBA
      &::before
      &::after
        border-bottom-color #4A6EBA
    > ul li:hover
      background-color #3A5898

.hr-nav-list
  display flex
  margin-right 30px
  > li
    display flex
    align-items center
    &:hover
      > a
      > div > a
        color #fff
    > div
      height 50px
      line-height 50px
    > div > a
      &:hover
        color #fff
        opacity 1
  > li
    margin-left 52px
  a[data-role="link"]
    color rgba(255, 255, 255, .5)
    transition color .2s
    justify-content center
    span
      min-width 52px
    &:hover
      opacity 1
  .active
    a[data-role="link"]
      color #fff

.hr-nav-menu
  ul
    z-index 10
    top 100%
    background-color #4A6EBA
    width 178px
    border-bottom-left-radius 3px
    border-bottom-right-radius 3px
    box-shadow 0px 0px 6px rgba(0, 0, 0, .2)
    padding 10px 0
    &:after, &:before
      bottom 100%
      right 50%
      margin-right -5px
      border solid transparent
      content " "
      height 6px
      width 6px
      position absolute
      pointer-events none
    &:after
      border-color rgba(255, 255, 255, 0)
      border-bottom-color #4A6EBA
      border-width 5px
      margin-left -8px
    &:before
      border-color rgba(194, 225, 245, 0)
      border-bottom-color #4A6EBA
      border-width 6px
      margin-left -8px
      right 88px
    a[data-role="link"]
      display flex
      height 38px
      flex 1
      align-items center
      padding 8px 14px 8px 20px
      font-size 13px
      color #fff
      &.active
      &:hover
        background-color #3A5898
        opacity 1
        color #fff

.header-sub-navs
  position absolute
  left 0
  right 0
  top 50px
  background #E5E8EC
  height 30px
  ul
    width 998px
    margin auto
    display flex
    align-items center
    li
      font-size 12px
      .nav-link
        display flex
        align-items center
        i
          color #ADADAD
          font-size 10px
      a[data-role="link"]
        color #0779C3
        font-size 12px

.settings-icon
.message-icon
  padding 0 2px
  &:hover
    i
      color #fff
  i
    color #7D8996
    transition color .2s
    font-size 16px

.active
  .message-icon
  .settings-icon
    i
      color #e6e7e8

.unread
  position relative
  > i
    background: #ff6262;
    width 6px
    height 6px
    border-radius 50%
    position absolute
    top 17px
    right 11px

.objective
  position relative
  color #7f8a97
  cursor pointer
  > a
    color #7f8a97
    &:hover
      opacity 1
  ul
    width 118px
    background-color #303D4B
    position absolute
    left -15px
    top 0
    padding-bottom 10px
    padding-top 7px
    border-bottom-left-radius 3px
    border-bottom-right-radius 3px
    box-shadow 0 -2px 7px rgba(0,0,0,.6)
    &:after, &:before
      bottom 100%
      left 90px
      border solid transparent
      content " "
      height 6px
      width 6px
      position absolute
      pointer-events none
    &:after
      border-color rgba(255, 255, 255, 0)
      border-bottom-color #ffffff
      border-width 5px
      margin-left -8px
      right 34px
    &:before
      border-color rgba(194, 225, 245, 0)
      border-bottom-color #ccc
      border-width 6px
      margin-left -9px
  li
    transition background-color .2s
    transition-timing-function ease-in
    padding 8px 0 8px 0
    text-align center
    a,span
      color #fff
      font-size 13px
      display block
      &:hover
        opacity 1
  li:first-child
    a
      font-size 14px
  li + li
    &.active
    &:hover
      background-color #212A34

.app-nav-wrapper
.user-nav
  display flex
  align-items center

.user-nav
  margin-right 20px
  > li
    height 50px
    display flex
    align-items center
  > li:first-child
  > li:last-child
    margin-left 26px

.app-nav-wrapper
  margin-right 30px

.header-icon
  transition .3s
  &:hover
    background #141C26
    i
      color #7d8996
  i
    color #7d8996
    padding 15px
    font-size 16px
    margin-top 4px
    

.search
  position relative
  border-radius 0
  width 30px
  height 30px
  z-index 1
  position absolute
  top 10px
  right 0
  @extends .h-center
  transition .3s
  &:hover
    background #141C26
  > span, .search-close > span
    position absolute
    left 0
    top -1px
    width 30px
    height 30px
    z-index 2
    display block
    &:hover
      transform scale(1)
    >i
      color #7d8996
      font-size 18px
  // 搜索条件
  .search-condition
    position absolute
    z-index 2
    display none
    top 2.5px
    > div
      border none
      > div
        margin-top 0
        li
          padding-top 1px
  &.search-active
    width 250px
    background #fff
    &:hover
      background #fff
    > span
      display none
    // 搜索条件
    .search-condition
      display block
    .search-input 
      opacity 1
      width 250px
      padding 0 30px 0 100px
    .search-close
      opacity 1
  .search-input
    height 30px
    width 0
    position absolute
    transition .3s
    top 0
    left 0
    padding 0 15px
    opacity 0
  .search-close
    position absolute
    right 0
    top 0
    width 30px
    opacity 0
    z-index 1
    transition .3s
  input
    height 30px
    line-height 30px
    border none
    width 100%
    line-height 30px
    background-color transparent
    transition .1s
    &::-ms-clear 
      display none
    &:focus
      background-color transparent


@-webkit-keyframes showObjectiveList {
  0% {
    height 50px
    box-shadow 0 -2px 0px rgba(0,0,0,.6)
  }

  100% {
    height 167px
    box-shadow 0 -2px 7px rgba(0,0,0,.6)
  }
}

@media (max-width: 1100px)
  .root
    justify-content flex-start
    padding-left 10px

.objective > a.active
  color: #fff
